<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">


</head>
<body>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

<style>
    .el-row {
        margin-bottom: 20px;

    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-button {
        overflow: visible
    }
</style>


<div id="app">

    <el-header>公告管理界面</el-header>

    <el-container>

<!--        //d-->
        <!--主界面-->
        <el-main>

            <el-row style="height: 40px">

                <el-col :span="4">
                    <div>
                        <el-button style="float: left; padding: 8px 10px" type="primary" plain size="small"
                                   icon="el-icon-circle-close" @click="logout">退  出
                        </el-button>
                    </div>
                </el-col>

                <el-col :span="4">
                    <div>
                        <el-button style="float: left; padding: 8px 10px" type="primary" plain size="small" icon="el-icon-document"
                                   @click="showDialog">添加系统公告
                        </el-button>
                    </div>
                </el-col>

            </el-row>

            <!-- <el-row :span="8">

                 <el-col :span="8">
                     <el-button type="primary" plain size="small" icon="el-icon-document" @click="showDialog">添加系统公告
                     </el-button>
                 </el-col>
             </el-row>-->

            <el-row>
                <el-col :span="24">
                    <div>

                        <el-table
                                :data="pageBean.data"
                                style="width: 100%">
                            <!-- index指定生成序号的函数 -->
                            <el-table-column
                                    label="序号" type="index" width="60" :index="indexMethod">
                            </el-table-column>


                            <el-table-column
                                    label="公告标题"
                                    width="180" prop="title">

                                </template>
                            </el-table-column>

                            <el-table-column
                                    label="公告内容"
                                    width="280" prop="description">

                            </el-table-column>

                            <el-table-column
                                    label="创建时间"
                                    width="280" prop="created">

                            </el-table-column>

                            <el-table-column
                                    label="更新时间"
                                    width="180" prop="updated">

                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>


                        </el-table>
                    </div>
                </el-col>
            </el-row>


            <!-- 分页部分 -->
            <el-row>
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <div>
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="1"
                                        :page-sizes="[3, 5, 10]"
                                        :page-size="5"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="pageBean.count">
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>


            <!--
    新增和修改对话框
    close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
    visible.sync 为真表示显示，否则是隐藏
     -->
            <el-dialog title="添加/修改公告信息" :visible.sync="dialogFormVisible" width="45%" @close="cancel"
                       :close-on-click-modal="false">
                <!-- status-icon 为输入框添加了表示校验结果的反馈图标-->
                <!-- model 绑定的对象 rules 验证规则 ref是引用的名字 -->
                <el-form :model="form" label-width="100px" size="small" ref="announcementForm" status-icon>
                    <!-- prop属性用于表单验证 -->
                    <el-form-item label="公告标题" prop="title">
                        <el-input v-model="form.title" autocomplete="off" placeholder="请输入公告标题"
                                  prefix-icon="el-icon-user" style="width:90%"/>
                    </el-form-item>

                    <el-form-item label="公告内容" prop="description">
                        <el-input type="textarea" v-model="form.description" autocomplete="off" placeholder="请输入公告内容"
                                  prefix-icon="el-icon-location" style="width:90%"/>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel" icon="el-icon-ice-cream-round">取 消</el-button>
                    <el-button type="primary" @click="save" icon="el-icon-milk-tea">确 定</el-button>
                </div>
            </el-dialog>

        </el-main>
    </el-container>
</div>


<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,  //对话框不可见
            //表单
            form: {
                title: '',
                description: ''
            },
            //token
            token: sessionStorage.getItem("Authorization"),
            //页面对象
            pageBean: {},
            //查询参数
            param: {
                current: 1,
                size: 5,
            },
        },
        methods: {
            findAnnouncement() {
                axios.post(`/announcement/find`, this.param, {
                    headers: {
                        Authorization: this.token
                    }
                }).then(resp => {
                    this.pageBean = resp.data;
                }).catch(function (error) {
                    location.href = "/login.html";
                    return;
                })
            },
            //第一列的行号，index从0开始
            indexMethod(index) {
                //每一页的编号
                return (this.pageBean.current - 1) * this.pageBean.size + index + 1;
            },
            cancel() {
                this.dialogFormVisible = false;
                //表单重置一下
                this.form.title = '';
                this.form.description = '';
                this.form.id = null;
            },
            showDialog() {
                //显示出来
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                //显示输入窗口
                this.dialogFormVisible = true;
                //将这一行的数据复制给form对象
                Object.assign(this.form, row);
            },
            //确定按钮
            save() {
                // 为表单绑定验证功能
                this.$refs["announcementForm"].validate((valid) => {
                    //验证通过
                    if (valid) {
                        //如果id有值，则是更新
                        if (this.form.id) {
                            //更新的代码
                            axios.post(`/announcement/update`, this.form, {
                                headers: {
                                    Authorization: this.token
                                }
                            }).then(resp => {
                                let resultInfo = resp.data;
                                //判断是否更新成功
                                if (resultInfo.success) {
                                    //成功的信息
                                    this.$message.success(resultInfo.message);
                                    //对表单重置
                                    this.$refs.announcementForm.resetFields();
                                    //重新加载新的数据
                                    this.findAnnouncement();
                                    //关闭添加窗口
                                    this.dialogFormVisible = false;
                                    this.cancel();
                                } else {
                                    this.$message.error("更新失败，请联系管理员");
                                    this.$refs.announcementForm.resetFields();
                                    this.cancel();
                                }
                            });
                        }
                        //如果id没有值，才是添加
                        else {
                            //添加收货地址
                            axios.post("/announcement/save", this.form, {
                                headers: {
                                    Authorization: this.token
                                }
                            }).then(resp => {
                                //if(resp.status == 200){
                                let resultInfo = resp.data;
                                //判断是否添加成功
                                if (resultInfo.success) {
                                    //成功的信息
                                    this.$message.success(resultInfo.message);
                                    //对表单重置
                                    this.$refs.announcementForm.resetFields();
                                    //重新加载新的数据
                                    this.findAnnouncement();
                                    //关闭添加窗口
                                    this.dialogFormVisible = false;
                                    this.cancel();
                                } else {
                                    this.$message.error("添加失败，请联系管理员");
                                    this.$refs.announcementForm.resetFields();
                                    this.cancel();
                                }
                                /* }else{
                                     location.href = "/login.html";
                                 }*/

                            });
                        }

                    } else {
                        return false;
                    }
                });
            },
            handleDelete(index, row) {
                //操作前确认
                this.$confirm("真的要删除吗?", '删除操作', {
                    type: 'warning'
                }).then(() => {
                    //执行删除操作
                    axios.get("/announcement/delete?id=" + row.id, {
                        headers: {
                            Authorization: this.token
                        }
                    }).then(resp => {
                        let resultInfo = resp.data;
                        if (resultInfo.success) {
                            //显示信息
                            this.$message.success(resultInfo.message);
                            //重新加载地址
                            this.findAnnouncement();
                        }
                    });
                }).catch(() => {
                    //点取消按钮，如果什么也不做就留空，不能删除，删除后会出现错误
                });
            },
            handleSizeChange(val) {
                //修改页面大小
                this.param.size = val;
                //再次查询
                this.findAnnouncement();
            },
            handleCurrentChange(val) {
                //修改当前页
                this.param.current = val;
                //查询
                this.findAnnouncement();
            },
            logout() {
                sessionStorage.removeItem("Authorization");
                location.href = "/login.html";
            }


        },
        mounted() {
            this.findAnnouncement();
        }
    })
</script>

</body>
</html>